<!-- frontend/src/App.vue -->
<template>
  <div class="page">
    <div class="main">
      <router-view />
    </div>

    <!-- 页面底部横跨的 Tag 行 -->
    <div class="footer">
      <div class="tags">
        <div
          v-for="t in ALL_TAGS"
          :key="t"
          class="tag"
          :class="{ active: highlightedTags.includes(t) }"
        >
          {{ t }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useChatStore } from './stores/chat';
import { ALL_TAGS } from './config/api';

const store = useChatStore();
const highlightedTags = computed(() => store.activeModelTags);
</script>

<style scoped>
/* 页级网格：上=主区  下=底部Tag */
.page{
  display: grid;
  grid-template-rows: 1fr auto;   /* 主区占满，底部自适应 */
  height: 100dvh;
  overflow: hidden;
}

.main{
  /* 关键：主区本身不滚动，交给内部三列滚 */
  padding:16px 20px 4px;  /* bottom 调小，让内容更贴近底部 Tag */
  height:100%;
  overflow:hidden;
}

/* 底部 Tag 为普通块（不 fixed），始终可见，不会遮挡输入框 */
.footer{
  border-top: 1px solid var(--border);
  background: var(--muted);
  padding: 6px 12px;
  white-space: nowrap;
}

/* 标签容器样式，确保能显示10个标签 */
.tags {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0;
  width: 100%;
}

/* 单个标签样式 */
.tag {
  padding: 4px 12px;
  border-radius: 16px;
  background: #f0f0f0;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-width: calc(10% - 8px);
  text-align: center;
  border: 1px solid transparent;
}

/* 激活状态的标签 */
.tag.active {
  background: #1677ff;
  color: white;
  border-color: #1677ff;
}

/* 悬停效果 */
.tag:hover:not(.active) {
  background: #e6f7ff;
  border-color: #91d5ff;
}

/* 自定义滚动条 */
.tags::-webkit-scrollbar {
  height: 4px;
}

.tags::-webkit-scrollbar-track {
  background: transparent;
}

.tags::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 2px;
}

.tags::-webkit-scrollbar-thumb:hover {
  background: #999;
}
</style>